<template>
    <div >
        <el-scrollbar class="app-container-scroll-bar">
            <pageTitle :title="pageTitle" :hasBack="true" ></pageTitle>
            <card  :sourceData="pageData" :data="data" icon-class="icon-jiqun" :id="id" :url="url"></card>

            <!-- tab start-->
            <el-tabs style="margin:0 20px;" v-model="activeName" type="border-card" @tab-click="handleClick">
                <el-tab-pane label="应用日志" name="first">
                    <el-button style="z-index:1000;position:absolute;right:20px;top:10px;" type="info" @click="handleReshLOG">
                        刷新
                    </el-button>
                	<pageLog
										ref="pageLog"
										:options="pageLogOptions"
									></pageLog>
                </el-tab-pane>

                <el-tab-pane label="发布内容" name="two" v-if="instConf == '2'">
                    <fabu-content :id="id"  @handleRestarbtn="handleRestarbtn"></fabu-content>
                </el-tab-pane>

                <el-tab-pane label="配置项信息" name="three" v-if="instConf == '1'">
                   <pzinfo :instConfigs="instConfigs" :varsInfo="varsInfo" :relaInfo="relaInfo" @handleRestarbtn="handleRestarbtn"></pzinfo>
                </el-tab-pane>

                <el-tab-pane label="事件历史" name="second">
                    <history-step :stepsList="stepsList" :id="id" ref="shijianlishi"></history-step>
                </el-tab-pane>
            </el-tabs>
            <!-- tab end -->

        </el-scrollbar>
    </div>
</template>



<script>
import pageTitle from "@/view/layout/components/content/pageTitle";
import card from '@/view/components/card/detailCard.vue';
import historyStep from '@/view/components/step/historyStep.vue';
import fabuContent from '@/view/pages/shili/detail/fabuContent.vue';
import pzinfo from '@/view/pages/shili/detail/pzinfo.vue';
import {listenner} from "@/utils/statuslistener" ;
import {appStatusFilter} from '@/filters/status/index';
import {getInstStatus} from '@/service/swagger/AcAppInstController'
import { restart } from '@/service/swagger/InstanceController.js'
import { searchLogInitIdInfoPage } from "@/service/swagger/LogController";
import pageLog from "@/view/components/log/pageLog";


import {getAppInstById} from'@/service/swagger/AcAppInstController'
export default{
    components:{
        card,
        pageTitle,
        historyStep,
        fabuContent,
        pzinfo,
        pageLog,
    },
    data(){
        return{
            activeName:'first',
            id:this.$route.query.id,
            instConf:this.$route.query.instConf,
            pageTitle:"组件实例详情",
            dialogVisible:false,
            data:null,
            config:{
              appName:"应用名字",
              appType:"应用类型",
              appVersion:"应用版本",
              createTime:"创建时间",
              creatorName:"创 建 人",
              status:"应用状态",
              instName:"实例名称",
              instId:"实例ID",
              updateTime:"更新时间"
            },
            stepsList:[],
            url:'/appcloud-log-es/appcloudes/searchLogInitIdInfoPage',//日志接口
            instConfigs:[],
            varsInfo:[],
            relaInfo:[],
            pageData:{},
            pageLogOptions: {
                autoGetData: true,
                serviceFN: searchLogInitIdInfoPage,
                params: {
                    id: this.$route.query.id,
                }

            }
        }
    },
    mounted() {
      this.stepsList = [{title:'2017-21-12 昨天',desc:'构建成功',id:321312},{title:'2017-21-11 前天',desc:'升级成功',id:321312}]
      this.initPage()
    },
    methods:{
        initPage(){
            if(this.id){
                getAppInstById(this.id).then(ret=>{
                    if(ret&&ret.data&&ret.code == 0){
                        this.pageData = ret.data
                        // this.data = obj;
                        this.initCardData()
                        this.addStatusListenner();
                        this.instConf = ret.data.instConf;
                        this.instConfigs = ret.data.instConfigs;
                    }
                })
            }
        },
        initCardData(){
            let obj = {}
            for(let key in this.pageData){
                const _name = this.config[key]
                if(_name){
                    if(key=='status'){
                        obj[_name] = {
                            html : appStatusFilter(this.pageData[key])
                        };
                    }else{
                        obj[_name] = this.pageData[key];
                    }
                    
                }
            }
            this.data = obj;
        },
         // 重启
        handleRestarbtn(){
            this.$confirm("确定重启？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						restart({id:this.id}).then(ret=>{
							this.initPage()
						})
					})
        },
        addStatusListenner(){
            const statusStatic = (status)=>{
                // 是否是稳定状态
                const isStatic =  !(appStatusFilter(status).indexOf("...")>-1);
                return isStatic ;
            }
            if(!statusStatic(this.pageData.status)){
                listenner({
                    api : {
                        serviceFN : getInstStatus ,
                        params : [
                                this.id ,
                        ],
                    },
                    callBack: (ret)=>{
                        
                        this.pageData.status = ret.data[0].status;
                        
                        this.initCardData();
                        
                        // this.$refs.log.initData({
                        //     id : this.data.instId ,
                        // });
                        
                        let status = statusStatic(this.pageData.status);
												this.$refs.pageLog.setStatusStatic(status);
                        return status;
                    },
                },this)
            }
        },
          //刷新日志
        handleReshLOG(){
            this.$refs.pageLog.initPage()
            this.$refs.pageLog.initData()
        },
        handleClick(tab, event) {
            console.log(tab.name)
            if(tab.name == 'two'){
                this.$refs.fabuneirong.initData()
                this.$refs.fabuneirong.vmPath = ""
                this.$refs.fabuneirong.mntPath = ""
            }
           if(tab.name == 'second'){
              this.$refs.shijianlishi.getData()
           }
        }
    }


}
</script>


<style scope>

</style>

